import React,{useEffect,useState} from 'react'
import {Menu} from 'antd';
import { Link } from 'react-router-dom'
import {
    UserOutlined,
    CloudServerOutlined,
    HomeOutlined,
    TeamOutlined,
    FileSearchOutlined,
    WechatOutlined ,
    HddOutlined,
    AlertOutlined,
    GroupOutlined,
    CloudDownloadOutlined,
    ApartmentOutlined,
    UsergroupAddOutlined,
    ProfileOutlined,
    FileProtectOutlined,
    HistoryOutlined,
    BlockOutlined,
    FileTextOutlined,
    ExceptionOutlined,
    FileSyncOutlined,
    ExclamationCircleOutlined,
    SmileOutlined,
    ReadOutlined,
    CreditCardOutlined,
    SettingOutlined
    
} from '@ant-design/icons';


const { SubMenu } = Menu;

export default function SideNav(props) {
    let [menus,SetMenus]=useState([])
    let [curMenu,SetCurMenu]=useState()
    useEffect(() => {
        let permissionMenu = sessionStorage.getItem("permissionMenu");
        let curMenuItem = sessionStorage.getItem('curMenuItem')
        SetMenus(JSON.parse(permissionMenu))
        SetCurMenu(curMenuItem)
    }, [])

    useEffect(() => {
        let curMenuItem = sessionStorage.getItem('curMenuItem')
        SetCurMenu(curMenuItem)
    })

    let clickMenu=(item)=>{
        sessionStorage.setItem("curMenuItem",item.key)
    }
    let  getIconType=(icon)=>{
        let iconType= <HomeOutlined />
        switch (icon) {
          case "SettingOutlined":
            iconType = <SettingOutlined />;
            break;
          case "CreditCardOutlined":
            iconType = <CreditCardOutlined />;
            break;
          case "ReadOutlined":
            iconType = <ReadOutlined />;
            break;
          case "SmileOutlined":
            iconType = <SmileOutlined />;
            break;
          case "ExclamationCircleOutlined":
            iconType = <ExclamationCircleOutlined />;
            break;
          case "FileSyncOutlined":
            iconType = <FileSyncOutlined />;
            break;
          case "ExceptionOutlined":
            iconType = <ExceptionOutlined />;
            break;
          case "FileTextOutlined":
            iconType = <FileTextOutlined />;
            break;
          case "BlockOutlined":
            iconType = <BlockOutlined />;
            break;
          case "ProfileOutlined":
            iconType = <ProfileOutlined />;
            break;
          case "FileProtectOutlined":
            iconType = <FileProtectOutlined />;
            break;
          case "HomeOutlined":
            iconType = <HomeOutlined />;
            break;
          case "TeamOutlined":
            iconType = <TeamOutlined />;
            break;
          case "FileSearchOutlined":
            iconType = <FileSearchOutlined />;
            break;
          case "WechatOutlined":
            iconType = <WechatOutlined />;
            break;
          case "HddOutlined":
            iconType = <HddOutlined />;
          case "AlertOutlined":
            iconType = <AlertOutlined />;
            break;
          case "GroupOutlined":
            iconType = <GroupOutlined />;
            break;
          case "CloudDownloadOutlined":
            iconType = <CloudDownloadOutlined />;
            break;
          case "ApartmentOutlined":
            iconType = <ApartmentOutlined />;
            break;
          case "UsergroupAddOutlined":
            iconType = <UsergroupAddOutlined />;
          break;
          case "CloudServerOutlined":
            iconType = <CloudServerOutlined />;
          break;
          case "UserOutlined":
            iconType = <UserOutlined />;
            break;
          case "HistoryOutlined":
            iconType = <HistoryOutlined />;
            break;
          break;
        }
        return iconType;
    }
    return (
        <>
            <Menu
                  theme="dark"
                  selectedKeys={
                    [curMenu]
                  }
                  onClick={clickMenu}
                  mode="inline"
              >
                  {
                      menus.map(
                          (route) =>
                              !route.hasSubMenu?
                                <Menu.Item key={route.key} icon={getIconType(route.iconType)}>
                                  
                                    <Link to={route.link}>
                                        <b>
                                            {route.text}
                                        </b>
                                    </Link>
                                </Menu.Item>
                                :
                                <SubMenu
                                    key={route.key}
                                    title={
                                      <span>
                                        {getIconType(route.iconType)}
                                        <span>{route.text}</span>
                                      </span>
                                    }
                                >
                                    { 
                                      route.subMenu.map((sub) =>
                                        <Menu.Item key={sub.key} icon={getIconType(sub.iconType)}>
                                            <Link to={sub.link}>
                                                <b>
                                                    {sub.text}
                                                </b>
                                            </Link>
                                        </Menu.Item>
                                      )
                                    }
                                </SubMenu>
                      )
                  }
              </Menu>
        </>
    )
}
